<template>
  <div class="detail" style="padding: 10px 20px;">
      <div class="bread">
          <el-breadcrumb separator=">">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/policylaw/list' }">政策法规</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '' }">详情页面</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div id="setting" class="floating-icon" @mousedown="startDrag" @dblclick="drawer=true">
          <el-icon>
              <Setting />
          </el-icon>
      </div>
      <el-drawer style="width: 100px;" v-model="drawer" title="菜单栏" :with-header="true">
          <el-button type="primary" @click="lockScreen" style="width: 80%;">锁屏</el-button>
      </el-drawer>
      <!-- 展开的菜单栏 -->
      <!-- 锁屏状态 -->
      <button class="lock-screen" v-show="screenLocked" @keyup.esc="unlockScreen">
      </button>
      <el-dialog v-model="pdfview" title="Tips" :width="FullScreen?'70%':'100%'">
          <div style="display: block;position: relative;">
              <div :class=" {pageToola:handoff,pageToolb:!handoff}">
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="handoff=!handoff"><el-icon><Switch /></el-icon></div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="lastPage"><el-icon><ArrowLeftBold /></el-icon></div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}">{{ state.pageNum }}/{{ state.numPages }}</div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="nextPage"><el-icon><ArrowRightBold /></el-icon></div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="pageZoomOut"><el-icon><ZoomIn /></el-icon></div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="pageZoomIn"><el-icon><ZoomOut /></el-icon></div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="FullScreen=!FullScreen"><el-icon><Rank /></el-icon></div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="PDFPrint"><el-icon><Printer /></el-icon></div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="PDFDownload"><el-icon><Download /></el-icon></div>
                  <div :class="{pageToolItema:handoff,pageToolItemb:!handoff}" @click="pdfview = false"><el-icon><Close /></el-icon></div>
              </div>
              <vue-pdf-embed ref='pdf' :source="state.source" :style="scale " :page="state.pageNum" 
                  class="vue-pdf-embed" textLayer />
          </div>
          <template #footer>
              <!-- <div class="dialog-footer">
              <el-button @click="dialogOverflowVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogOverflowVisible = false">
              关闭
              </el-button>
          </div> -->
          </template>
      </el-dialog>

      <el-card class="box-card">
          <div >
              <div v-for="o in 1" :key="o" class="text item">
                  <div class="title" :style="text">{{ detail.title }}</div>
                  <div class="publish">
                      <span :style="text"> 发布企业：{{ detail.publisher }}</span>
                      <span :style="text"> 发布时间：{{ parseTime(detail.publishDatetime, '{y}-{m}-{d}') }}</span>
                  </div>
                  <span style="display:flex;justify-content: right;">
                      <el-button type="text" size="mini" @click="openPdf()">{{getPDFFileName()}}</el-button>
                      <el-button type="success" size="mini" @click="changeTextSize('40px')">大</el-button>
                      <el-button type="success" size="mini" @click="changeTextSize('30px')">中</el-button>
                      <el-button type="success" size="mini" @click="changeTextSize('20px')">小</el-button>
                  </span>
                  <div class="bigcontent" v-html="bidContent" :style="text"></div>
              </div>
          </div>
      </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { getPolicylaw } from '@/api/bid/policylaw';
import VuePdfEmbed from 'vue-pdf-embed'
import * as pdfjsLib from 'pdfjs-dist'

const route = useRoute()
const id = route.query.id;
const detail = ref({});
let bidContent = ref("");
const text = ref({ fontSize: '' });
const drawer = ref(false)
const pdfview = ref(false)
const pdf = ref(null) 
const handoff = ref(false)
const FullScreen = ref(true)
//pdf預覽
const state = reactive({
  source: '', // pdf文件地址
  pageNum: 1, // 当前页面
  scale: 1, // 缩放比例
  numPages: 0 // 总页数
})
const scale = computed(() => `transform:scale(${state.scale})`)

const getInformationDetail = async (id) => {
  // Your implementation to get information detail
};

const changeTextSize = (large) => {
  text.value.fontSize = large;
};

const print = () => {
  window.print();
};

onMounted(() => {
  getPolicylaw(id).then((res) => {
      detail.value = res.data;
      bidContent.value = res.data.content;
      getPdfUrl(detail.value.remark)
  });
});

async function getPdfUrl(data) {
  const doc = await VuePdfEmbed.getDocument(data).promise
  state.source = data
  pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js',
      state.numPages = doc.numPages
}
function openPdf() {
  pdfview.value = true
  getPdfUrl(detail.value.remark)
}
// 上一页
function lastPage() {
  if (state.pageNum > 1) {
      state.pageNum -= 1
  }
}
// 下一页
function nextPage() {
  if (state.pageNum < state.numPages) {
      state.pageNum += 1
  }
}
// 放大
function pageZoomOut() {
  if (state.scale < 2) {
      state.scale += 0.1
      getPdfUrl(detail.value.remark)
  }
  console.log(state)
}
// 缩小
function pageZoomIn() {
  if (state.scale > 1) {
      state.scale -= 0.1
      getPdfUrl(detail.value.remark)
  }
}

// -- 获取文件名（用于 文件打印和下载）--
function getPDFFileName() {
  const last_index = state.source.lastIndexOf('/');
  return state.source.slice(last_index + 1);
}

// -- pdf文件打印 --
function PDFPrint() {
  pdf.value.print(300, getPDFFileName(), true);
}
//下載
function PDFDownload() {
  pdf.value.download(getPDFFileName());
}


onBeforeUnmount(() => {
  document.removeEventListener('click', onClickOutside);
});

const onClickOutside = (event) => {
  if ($refs.popoverRef && !$el.contains(event.target)) {
      $refs.popoverRef.doClose();
  }
};
const menuOpen = ref(true);
const screenLocked = ref(false);
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
const element = document.getElementById("setting")

const startDrag = (event) => {
  isDragging = true;
  offsetX = event.clientX - event.target.getBoundingClientRect().left;
  offsetY = event.clientY - event.target.getBoundingClientRect().top;
};
document.addEventListener('mousemove', (event) => {
  if (isDragging) {
      // element.style.left = e.clientX - offsetX + "px";
      // element.style.top = e.clientY - offsetY + "px"
      const floatingIcon = document.querySelector('.floating-icon');
      if (floatingIcon) {
          const newLeft = event.clientX - offsetX;
          const newTop = event.clientY - offsetY;
          floatingIcon.style.left = `${newLeft}px`;
          floatingIcon.style.top = `${newTop}px`;
      }
  }
});

document.addEventListener("mouseup", ()=>{
  isDragging = false;
})

const toggleMenu = () => {
  menuOpen.value = !menuOpen.value;
  drawer.value = true
};


const lockScreen = () => {
  screenLocked.value = true;
};

const unlockScreen = () => {
  screenLocked.value = false;
};
</script>

<style lang="scss" scoped>
.pageToolb {
  display: block;
  position: absolute;
  top: 40px;
  right:20px;
  z-index: 100;
  align-items: center;
  background: rgb(66 66 66);
  color: white;
  border-radius: 25px;
  cursor: pointer;
  justify-content: center;
  font-size: 15px;

}
.pageToola{
  display: flex;
  position: absolute;
  
  top: 10px;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  align-items: center;
  background: rgb(66 66 66);
  color: white;
  border-radius: 19px;
  cursor: pointer;
  justify-content: center;
  font-size: 15px;
}

.pageToolItemb {
  display: block;
  padding: 10px 5px;
  cursor: pointer;
}

.pageToolItema{
  padding: 4px 10px;
  cursor: pointer;
}

.floating-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  justify-content: center;
  background-color: #007bff;
  color: white;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  padding-top: 2px;
  border-radius: 5px;
}

.menu {
  position: fixed;
  bottom: 70px;
  right: 70px;
  background-color: #f8f9fa;
  padding: 10px;
  border: 1px solid #ced4da;
  display: none;
}

.menu ul {
  list-style-type: none;
  padding: 0;
}

.menu li {
  cursor: pointer;
}

.lock-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/images/测试图片2_proc.jpg');
  background-color: black;
  color: white;
  z-index: 9999;
}

.mobileList {
  display: none;
}

.bread {
  display: flex;
  line-height: 20px;
  padding: 10px 20px 20px;
}

.computer::deep {
  font-size: 100px;
}

.box-card {
  .title {
      text-align: center;
      color: black;
      font-weight: 900;
      font-size: 23px;
  }

  span {
      display: inline-block;
      box-sizing: border-box;
      padding: 10px 30px;
  }

  .bigcontent {
      display: block;
      padding: 20px 0;
      text-align: left;
      text-indent: 2ch;
  }
}

@media screen and (max-width: 767px) { 
      .title {
          text-align: center;
          color: black;
          font-weight: 900;
          font-size: 23px;
      }

      .publish {
          padding: 10px 0 10px;
      }

      span {
          display: flex;
          box-sizing: border-box;
          justify-content: left;
          text-align: left;
          padding: 0;
      }

      .bigcontent {
          display: block;
          padding: 0 0;
          text-align: left;
          text-indent: 2ch;
      }
  }

  .mobileList {
      display: block;
  }

  .bidTable,
  .bidPagination {
      display: none;
  }

  .list {
      .breadcrumb {
          margin-left: 0;
      }

      .content {
          width: 100%;
          margin: 14px 0px 44px 0px;
          min-height: auto;
      }
  }


/* Your existing styling */
</style>